import React, { CSSProperties } from "react"
import Lottie, { LottieOptions } from "lottie-react"
import { Box } from "@mui/system"

const Lotties = (props: LottieOptions) => {
  return <Lottie {...props}></Lottie>
}
export interface LottiesBackground extends LottieOptions {
  renderStyle?: CSSProperties
  hide?: boolean
}
const LottiesBackground = ({
  children,
  renderStyle,
  hide,
  ...props
}: LottiesBackground) => {
  return hide ? (
    children
  ) : (
    <Box
      sx={{
        ">div": {
          backgroundColor: "transparent!important",
          background: "transparent!important",
          ">svg": {
            position: "absolute",
            pointerEvents: "none",
            zIndex: 0,
            top: 0,
            ...renderStyle,
          },
        },
      }}
    >
      <Lottie style={{ position: "relative" }} {...props}>
        {children}
      </Lottie>
    </Box>
  )
}

export { Lotties, LottiesBackground }
